<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="medium" :inline="true" label-width="60px">
      <el-form-item label="查询栏" prop="inspectionPlanNum">
        <el-input v-model="queryParams.inspectionPlanNum" placeholder="请输入计划编号" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- <el-form-item label="" prop="supplierName">
        <el-autocomplete :fetch-suggestions="querySupplier" v-model="queryParams.supplierName" placeholder="请输入供应商"
          clearable @keyup.enter.native="handleQuery" />
      </el-form-item> -->
      <el-form-item label="" prop="cycleType">
        <!-- <el-autocomplete :fetch-suggestions="queryType" v-model="queryParams.typeName" placeholder="请输入循环类型" clearable
          @keyup.enter.native="handleQuery">
        </el-autocomplete> -->
        <el-select v-model="queryParams.cycleType" placeholder="请选择循环类型" style="width:100%">
          <el-option v-for="(dict, index) in ['循环保养', '指定日期']" :key="index" :label="dict" :value="index + ''">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="planStatus">
        <el-select v-model="queryParams.planStatus" placeholder="请选择状态" style="width:100%">
          <el-option v-for="(dict, index) in ['启用', '禁用']" :key="index" :label="dict" :value="index + ''"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="medium" @click="() => $emit('handleQuery', queryParams)">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="medium" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getsupplierlist, gettypelist } from "@/api/equipment/equipment.js";

export default {
  name: 'value',
  data () {
    return {
      // 查询参数
      queryParams: {
        inspectionPlanNum: undefined,
        cycleType: undefined,
        planStatus: undefined
      },
      timeout: null
    }
  },
  methods: {
    resetQuery () {
      for (const key in this.queryParams) {
        this.queryParams[key] = null
      }
      this.$emit('handleQuery', this.queryParams)
    },
    async queryType (queryString, cb) {
      let data = await gettypelist({ typeName: this.queryParams.typeName, status: 0 })
      var restaurants = data.data.map(item => { return { ...item, value: item.typeName } })
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    async querySupplier (queryString, cb) {
      let data = await getsupplierlist({ supplierName: this.queryParams.supplierName })
      var restaurants = data.data.map(item => { return { ...item, value: item.supplierName } })
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    }
  }
}
</script>

<style>

</style>